<template>
  <div class="menuListPage h100" style="">
    <search @clickAdd="handleAddEdit" @query="getMenuList"/>
    <a-spin :spinning="loading" style="height:calc(100% - 54px);margin-top: 20px;">
      <s-table
        class="h100"
        style=""
        :columns="menuColumns"
        :data-source="menuList"
        bordered
        key="id"
        :pagination="false"
        rowKey="id"
        childrenColumnName="childMenus"
        :showFilter="false"
      >
        <!--<template slot="title" slot-scope="text, record">-->
        <!--<span>{{ record.title }}</span>-->
      <!--</template>-->
      <template slot="createTime" slot-scope="text, record">
        <span>{{ $commonFun.getDateTimeStr(record.createTime) }}</span>
      </template>
      <template slot="type" slot-scope="text, record">
        <span>{{ record.type == 1 ? '菜单' : '按钮' }}</span>
      </template>
      <template slot="permissionUri" slot-scope="text, record">
        <table-ellipsis :table-ellipsis-is-turn-line="false" :text="text"/>
      </template>
      <template slot="updateTime" slot-scope="text, record">
        <span>{{ $commonFun.getDateTimeStr(record.updateTime) }}</span>
      </template>
      <template slot="operation" slot-scope="text, record">
      <span style="display: flex;">
        <auth-button :auth="managePerms.menu.edit" style="margin-right: 8px;word-break: keep-all;white-space: nowrap;" @click="handleAddEdit({id:record.id,chooseType: 'edit'},record)" type="primary" :ghost="true" size="small"><i class="iconfont icon-xiugai"/>编辑</auth-button>
        <auth-button :auth="managePerms.menu.add" style="margin-right: 8px;word-break: keep-all;white-space: nowrap;" @click="handleAddEdit({id: record.id,chooseType: 'newSubMenu'},record)" v-if="record.type != 2" type="primary" :ghost="true" size="small"><i class="iconfont icon-xinjian" ></i>新增子菜单</auth-button>
        <auth-button :auth="managePerms.menu.add" style="margin-right: 8px;word-break: keep-all;white-space: nowrap;" @click="handleAddEdit({id: record.id,chooseType: 'newSubBtn'},record)" v-if="record.type != 2" type="primary" :ghost="true" size="small"><i class="iconfont icon-xinjian" ></i>新增按钮</auth-button>
        <auth-button :auth="managePerms.menu.delete" style="margin-right: 8px;word-break: keep-all;white-space: nowrap;" @click="deleteMenu(record.id,record.remark)" type="danger" :ghost="true" size="small">
          <i class="iconfont icon-shanchu3 deleteUlr"/>{{ $t('delete') }}</auth-button>
      </span>
      </template>
    </s-table>

      <!--<tree-table-->
        <!--show-index-->
        <!--stripe-->
        <!--border-->
        <!--style="margin-top: 20px;font-size: 15px"-->
        <!--:data="menuList"-->
        <!--:columns="menuColumns"-->
        <!--children-prop="childMenus"-->
        <!--show-row-hover-->
        <!--:expand-type="false"-->
        <!--:selection-type="false"-->
        <!--&gt;-->
        <!--<template slot-scope="scope" slot="title">-->
          <!--<span @click="updateMenu(scope.row.id)">{{ scope.row.title }}</span>-->
        <!--</template>-->
        <!--<template slot-scope="scope" slot="createTime">-->
          <!--<span>{{ $commonFun.getDateTimeStr(scope.row.createTime) }}</span>-->
        <!--</template>-->
        <!--<template slot-scope="scope" slot="updateTime">-->
          <!--<span>{{ $commonFun.getDateTimeStr(scope.row.updateTime) }}</span>-->
        <!--</template>-->
        <!--<template slot-scope="scope" slot="operation">-->
          <!--<a style="margin-right: 8px;word-break: keep-all;white-space: nowrap;" @click="handleAddEdit({id:scope.row.id},scope.row)">编辑</a>-->
          <!--<a style="margin-right: 8px;word-break: keep-all;white-space: nowrap;" @click="handleAddEdit({id: scope.row.id,isAddSubMenu: true},scope.row)">新增子菜单</a>-->
          <!--<a style="margin-right: 8px;word-break: keep-all;white-space: nowrap;" @click="deleteMenu(scope.row.id,scope.row.remark)">{{ $t('delete') }}</a>-->
          <!--&lt;!&ndash;<a-button size="small" @click="handleAddEdit({id:scope.row.id})">&ndash;&gt;-->
            <!--&lt;!&ndash;<i class="iconfont icon-xinjian"></i>&ndash;&gt;-->
            <!--&lt;!&ndash;编辑&ndash;&gt;-->
          <!--&lt;!&ndash;</a-button>&ndash;&gt;-->
          <!--&lt;!&ndash;<a-button size="small" @click="handleAddEdit({id:scope.row.id})">&ndash;&gt;-->
            <!--&lt;!&ndash;<i class="iconfont icon-xinjian"></i>&ndash;&gt;-->
            <!--&lt;!&ndash;子菜单&ndash;&gt;-->
          <!--&lt;!&ndash;</a-button>&ndash;&gt;-->
          <!--&lt;!&ndash;<a-button size="small" @click="deleteMenu(scope.row)">&ndash;&gt;-->
            <!--&lt;!&ndash;<i class="iconfont icon-suoxiao1"></i>&ndash;&gt;-->
            <!--&lt;!&ndash;{{ $t('delete') }}&ndash;&gt;-->
          <!--&lt;!&ndash;</a-button>&ndash;&gt;-->
        <!--</template>-->
      <!--</tree-table>-->
    </a-spin>
  </div>
</template>

<script>
import TreeTable from 'vue-table-with-tree-grid'
import { menuColumns } from '../config/list'
import menuApi from '@/api/modules/system/menu'
import newEditMenu from './newEditMenu '
import { minxinDrawerUse } from '@/utils/mixin'
import search from './search'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import AuthText from '@/components/AuthText'
import { managePerms } from '@/config/permission/index'
import AuthButton from '@/components/AuthButton'
export default {
  mixins: [minxinDrawerUse],
  data () {
    return {
      menuList: [],
      loading: false,
      menuColumns,
      managePerms,
    }
  },
  methods: {
    //清除子菜单数组长度为0的字段
    deleteProperty (arr) {
      arr.forEach(a => {
        if (a.childMenus && a.childMenus.length !== 0) {
          //长度不为0，继续往下执行
          this.deleteProperty(a.childMenus)
        } else {
          //长度为0，删除该字段
          delete a.childMenus
        }
      })
    },
    //  递归获取该id的所有父id，不含该id
    getParentIdsById (arrs,id) {
      let parentIds = []
      function findParentIds (arr, id) {
        for (let i = 0; i < arr.length; i++) {
          let e = arr[i]
          if (e.id == id && e.parentId) {
            parentIds.push(e.parentId)
            //从头再找父id的上级
            findParentIds(arrs, e.parentId)
          }
          if (e.childMenus && e.childMenus.length > 0) {
            findParentIds(e.childMenus, id)
          }
        }
        return parentIds
      }
      findParentIds(arrs, id)
      return parentIds
    },

    // 新增 编辑
    handleAddEdit (recordData = {}, row = {}) {
      const vm = this
      this.$emit('clickbtn')
      const buttons = this.getRightDrawerFooterButtons({
        method: 'saveData'
      })
      if (recordData.id) {
        recordData.parentIds = this.getParentIdsById(this.menuList, recordData.id)
        // 操作为新增时需要选择到当前节点
        if (recordData.chooseType !== 'edit') {
          recordData.parentIds.unshift(recordData.id)
        }
      }
      if (JSON.stringify(row) !== '{}') {
        recordData = {
          ...recordData,
          ...row,
        }
      }
      recordData.menuList = JSON.parse(JSON.stringify(this.menuList)) // 深拷贝 解耦合 不然会导致子页面做禁用时改动到父级数据 展开运算符不可用 仅限使用类似深拷贝
      const vars = { recordData }
      const type = recordData.chooseType
      if (row.id) {
        vm.showRightDrawer(newEditMenu, vm.$t(type), buttons, 'medium', vars);
      } else {
        vm.showRightDrawerNoReset(newEditMenu, vm.$t(type), buttons, 'medium', vars);
      }
    },
    saveData (data) {
      if (data.id) {
        //编辑.
        return new Promise((resolve, reject) => {
          menuApi.updateMenu(data).then(res => {
            resolve(res)
            this.getMenuList()
          }).catch(err => {
            reject(err)
          })
        })
      } else {
        //新增
        return new Promise((resolve, reject) => {
          menuApi.addMenu(data).then(res => {
            resolve(res)
            this.getMenuList()
          }).catch(err => {
            reject(err)
          })
        })
      }
    },
    deleteMenu (id, remark) {
      let vm = this
      this.$confirm({
        title: this.$t('deleteMenu'),
        content: this.$t('deleteMenuTip') + `：${remark} ?`,
        onOk () {
          menuApi.deleteMenu({ ids: [id] }).then(res => {
            vm.$message.success(vm.$t('successfullyDelete'))
            vm.getMenuList()
          })
        },
        onCancel () {}
      })
    },
    getMenuList () {
      this.loading = true;
      menuApi.getMenuAllData().then(res => {
        this.menuList = res.data
        this.deleteProperty(this.menuList)
      }).finally(() => {
        this.loading = false;
      })
    },
  },
  created () {
    this.getMenuList()
  },
  components: {
    TreeTable,
    STable,
    search,
    AuthText,
    tableEllipsis,
    AuthButton
  }
}
</script>

<style lang="less" scoped>
  /deep/.ant-spin-container{
    height: 100%;
  }
/deep/.zk-table__body-wrapper {
  position: relative;
  top: -26px;
}
  a{
    color: #4388A6;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    -webkit-text-decoration-skip: objects;
  }
  // /deep/.ant-table-body,/deep/.ant-table-body-inner{
  //   max-height: unset !important;
  // }
</style>
